<template>
    <div class="secretary-edit">
        <div class="activeLine">
            <div class="activeLineArrow"></div>
        </div>
        <div style="text-align: left;font-size: 18px;font-weight: bold;margin-bottom: 10px;margin-top: 40px">
            <el-tag size="large" v-if="form.state === '0'" close-transition type="danger"  effect="dark" style="width: 220px;text-align: center;background-color: #C5C5C5;border: 1px solid #C5C5C5">当前状态：待提交</el-tag>
            <el-tag size="large" v-else-if="form.state === '2'" close-transition  type="primary"  effect="dark"  style="width: 220px;text-align: center;background-color: #409EFF;border: 1px solid #409EFF">当前状态：待市委审核</el-tag>
            <el-tag size="large" v-else-if="form.state === '3'" close-transition  type="success"  effect="dark"  style="width: 220px;text-align: center;background-color: #55BD94;border: 1px solid #55BD94">当前状态：市委审核通过</el-tag>
            <el-popover  placement="right"  width="400" trigger="click" >
                <el-timeline style="height: 350px;padding-top: 10px;overflow-y: scroll">
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :color="activity.color"
                        :timestamp="activity.modifiedAt">
                        <div>
                            <el-tag v-if="activity.status == '0'" close-transition type="success"  effect="dark">编辑</el-tag>
                            <el-tag v-else-if="activity.status == '1'" close-transition  type="primary"  effect="dark">提交</el-tag>
                            <el-tag v-else close-transition  type="danger"  effect="dark">审核</el-tag>
                            {{activity.auditor}}
                            {{activity.auditAdvice}}
                        </div>
                    </el-timeline-item>
                </el-timeline>
                <el-button slot="reference" type="text" @click="loadUpdateInfoList()" style="color: #45A14F;font-size: 14px;margin-left: 20px">信息更新记录</el-button>
            </el-popover>
            <div style="float: right;height: 40px;line-height: 40px">
                <div class="taskNotice"></div>
                <div style="display: inline-block;font-size: 14px;color: #393939">
                    <p v-show="isHasTask">友情提示: 基本信息更新任务已发布（截止日期{{endTime}}），当前信息可进行修改、保存、提交等操作！</p>
                    <p v-show="!isHasTask">友情提示: 基本信息更新任务未发布，当前信息不可进行修改、保存、提交等操作！</p>
                </div>
            </div>
            <el-form class="edit-form" v-loading="editLoad" ref="baseForm" label-position="right" :model="form" :rules="rules" label-width="105px" :disabled="isDisbaled">
                <el-row :gutter="20" style="margin-top: 20px">
                    <el-col :span="4">
                        <el-card shadow="hover" style="height: 330px" class="header-content">
                            <el-upload
                                action=""
                                :auto-upload="true"
                                :file-list="images"
                                :http-request="uploadFile"
                                list-type="picture-card">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <div style="position: relative;top: 250px;z-index: 110;text-align: center">
                                <i class="el-icon-edit" style="color: goldenrod;" ></i>
                                <el-input size="large" class="name-input" v-model="form.name" placeholder="村书记姓名"></el-input>
                                <div style="font-size: 16px;color: red;margin-top: -11px">{{form.quasiAssessmentRank||'暂无职级'}}</div>
                                <div style="width: 200px;margin: 0 auto">
                                    <el-button type="success" size="small" :disabled="buttonDisabled" @click="saveBaseInfo('baseForm')">保存</el-button>
                                    <el-button type="primary" size="small" :disabled="!submitable||buttonDisabled" @click="submit">提交</el-button>
                                </div>
                                <icon name="qrcode" scale="2.7" class="qrcode-content" @click.native="showQrCode()"></icon>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="10" >
                        <el-card shadow="hover" style="height: 330px" class="baseMassage">
                            <p class="cardTitle">基本人员信息</p>
                            <div style="clear: both"></div>
                            <br>
                            <el-col :span="12" style="padding: 0">
                                <el-form-item label="性别" prop="sex">
                                    <el-select v-model="form.sex"  placeholder="请选择性别">
                                        <el-option v-for="item in sexOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="出生日期" prop="birth">
                                    <el-date-picker
                                        v-model="form.birth"
                                        type="date"
                                        placeholder="请选择出生日期"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="民族">
                                    <el-select v-model="form.nation" placeholder="请选择民族">
                                        <el-option v-for="item in nationOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="籍贯">
                                    <el-input v-model="form.nativePlace"  placeholder="请输入籍贯"></el-input>
                                </el-form-item>
                                <el-form-item label="健康情况"  prop="health">
                                    <el-select v-model="form.health"  placeholder="请选择健康情况">
                                        <el-option v-for="item in healthOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12" style="padding: 0; min-height: 210px;">
                                <el-form-item label="身份证号" prop="identityCard">
                                    <el-input show-word-limit minlength="18" v-model="form.identityCard"  placeholder="请输入身份证号">
                                        <el-popover
                                            v-show="form.identityCardAnnex"
                                            slot="prefix"
                                            placement="left"
                                            width="330"
                                            trigger="hover">
                                            <div v-for="subItem in handleImage(form.identityCardAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                            <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                        </el-popover>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="联系电话"  prop="contact">
                                    <el-input v-model="form.contact"  placeholder="请输入联系电话"></el-input>
                                </el-form-item>
                                <el-form-item label="学历" prop="education">
                                    <el-select v-model="form.education"  placeholder="请选择学历">
                                        <el-option v-for="item in eduOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                        <el-popover
                                            v-show="form.educationAnnex"
                                            slot="prefix"
                                            placement="top"
                                            width="330"
                                            trigger="hover">
                                            <div v-for="subItem in handleImage(form.educationAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                            <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                        </el-popover>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="入党时间">
                                    <div>
                                        <el-popover
                                            v-show="form.partyTimeAnnex"
                                            slot="prefix"
                                            placement="left"
                                            width="330"
                                            trigger="hover">
                                            <div v-for="subItem in handleImage(form.partyTimeAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                            <el-button style="position: absolute;left: -18px;" slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                        </el-popover>
                                        <el-date-picker
                                            v-model="form.partyTime"
                                            type="date"
                                            placeholder="请选择入党时间"
                                            value-format="yyyy-MM-dd">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                                <el-form-item label="出生地">
                                    <el-input v-model="form.birthPlace" placeholder="请输入出生地"></el-input>
                                </el-form-item>
                            </el-col>
                            <div class="tempSaveBtn">
                                <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="10">
                        <el-card shadow="hover" style="height: 330px" class="workMessage">
                            <p class="cardTitle">基本工作信息</p>
                            <div style="clear: both"></div>
                            <br>
                            <el-col :span="12" style="padding: 0">
                                <el-form-item class="work_time" prop="onDutyTime" label="任职时长" label-width="100px">
                                    <el-input  type="number" v-model="form.onDutyTime" >
                                        <el-popover
                                            v-show="form.workTimeAnnex"
                                            slot="prefix"
                                            placement="top"
                                            width="330"
                                            trigger="hover">
                                            <div v-for="subItem in handleImage(form.workTimeAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                            <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                        </el-popover>
                                    </el-input>
                                    <span>年</span>
                                </el-form-item>
                                <el-form-item class="work_time" prop="onDutyMonth">
                                    <el-input type="number" v-model="form.onDutyMonth"></el-input>
                                    <span>月</span>
                                </el-form-item>
                                <el-form-item label="现任职级" prop="quasiAssessmentRank">
                                    <el-select v-model="form.quasiAssessmentRank" clearable placeholder="请选择现任职级">
                                        <el-option v-for="item in RankOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="现任职级时间">
                                    <el-date-picker
                                        v-model="form.termOfOffice"
                                        type="date"
                                        placeholder="请选择现任职级时间"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                                <!-- <el-form-item label="医疗保险" prop="medicalInsurance">
                                    <el-select v-model="form.medicalInsurance"  placeholder="请选择医疗保险">
                                        <el-option v-for="item in medicalInsuranceOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option></el-select>
                                </el-form-item> -->
                                <!-- <el-form-item label="养老保险" prop="socialSecurityDatabases">
                                    <el-select v-model="form.socialSecurityDatabases"  placeholder="请选择养老保险">
                                        <el-option v-for="item in socialSecurityDatabasesOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item> -->
                            </el-col>
                            <el-col :span="12" style="padding: 0;min-height: 210px;">
                                <el-form-item label="人员类型" prop="personnelType">
                                    <el-select v-model="form.personnelType"  placeholder="请选择人员类型">
                                        <el-option v-for="item in personOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <!-- <el-form-item label="专技职称">
                                    <el-input v-model="form.professionalTitle"  placeholder="请输入专技职称">
                                        <el-popover
                                            v-show="form.professionalTitleAnnex"
                                            slot="prefix"
                                            placement="top"
                                            width="330"
                                            trigger="hover">
                                            <div v-for="subItem in handleImage(form.professionalTitleAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                            <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                        </el-popover>
                                    </el-input>
                                </el-form-item> -->
                                <el-form-item label="到村时间">
                                    <el-date-picker
                                        v-model="form.workTime"
                                        type="date"
                                        placeholder="请选择到村工作时间"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <div class="tempSaveBtn">
                                <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                            </div>
                        </el-card>
                    </el-col >
                </el-row>
                <el-row :gutter="20" style="margin-top: 40px">
                    <el-col :span="8">
                      <el-card shadow="hover" style="min-height: 320px" class="endowment_insurance" >
                        <p class="cardTitle">社会保险信息</p>
                        <div style="clear: both"></div>
                        <br>
                        <div class="cardContent" >
                          <el-form class="socialSecurityForm" ref="baseForm" :rules="rules" label-position="top" label-width="125px" :model="form" inline :disabled="isDisbaled">
                              <el-form-item label="医疗保险" prop="medicalInsurance">
                                    <el-select v-model="form.medicalInsurance"  placeholder="请选择医疗保险类型">
                                        <el-option v-for="item in medicalInsuranceOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option></el-select>
                              </el-form-item>
                              <!-- <el-form-item label="参保时间" prop="insuredTime">
                                <el-date-picker
                                    v-model="form.insuredTime"
                                    type="date"
                                    placeholder="请选择参保时间"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                              </el-form-item>
                              <el-form-item label="缴费年限（月）" prop="insurancePaymentPeriod">
                                <el-input type="number" v-model="form.insurancePaymentPeriod" placeholder="请填写缴费年限"></el-input>
                              </el-form-item>
                              <el-form-item label="当前一级账户余额" prop="primaryAccountBalance">
                                <el-input type="number" v-model="form.primaryAccountBalance" placeholder="请填写当前一级账户余额"></el-input>
                              </el-form-item>
                              <el-form-item label="当前二级账户余额" prop="secondaryAccountBalance">
                                <el-input type="number" v-model="form.secondaryAccountBalance" placeholder="请填写当前二级账户余额"></el-input>
                              </el-form-item>
                              <el-form-item label="当前医保账户余额" prop="insuranceAccountBalance">
                                <el-input type="number" v-model="form.insuranceAccountBalance" placeholder="请填写当前医保账户余额"></el-input>
                              </el-form-item> -->
                              <div class="card_line"></div>
                              <el-form-item label="养老保险" prop="socialSecurityDatabases" style="margin-left: 18px;">
                                <el-select v-model="form.socialSecurityDatabases" placeholder="请选择养老保险类型">
                                    <el-option v-for="item in socialSecurityDatabasesOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item label="缴费年限" prop="paymentPeriod" style="margin-left: 50px;">
                                <el-input type="number" v-model="form.paymentPeriod"  placeholder="请选填写养老保险缴费年限"></el-input>
                              </el-form-item>
                              <el-form-item label="上年账户累计储存额" prop="depositBalance" style="margin-left: 18px;">
                                <el-input type="number" v-model="form.depositBalance" placeholder="请填写养老保险上年账户累计储存额"></el-input>
                              </el-form-item>
                              <el-form-item label="在职/退休" prop="hasOnTheJob" style="margin-left: 50px;">
                                <el-select v-model="form.hasOnTheJob"  placeholder="请选择在职/退休">
                                    <el-option v-for="item in hasOnTheJob" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                              </el-form-item>
                              <el-form-item v-if="isShowRetirementWage" label="退休工资" prop="retirementWage" style="margin-left: 18px;" placeholder="请填写退休工资">
                                <el-input type="number" v-model="form.retirementWage"></el-input>
                              </el-form-item>
                          </el-form>
                        </div>
                        <div class="tempSaveBtn" >
                          <el-button type="success" plain size="small"  @click="saveTempInfo()">保存</el-button>
                        </div>
                      </el-card>
                    </el-col>
                    <el-col :span="8" >
                        <el-card shadow="hover" style="min-height: 320px" class="workExperience" >
                            <p class="cardTitle">工作简历</p>
                            <div style="clear: both"></div>
                            <br>
                            <el-col :span="24" style="margin-bottom: 15px;min-height: 200px;">
                                <el-input type="textarea" v-model="form.workExperience" :placeholder="workExperiencePlaceholder" :rows="8"></el-input>
                            </el-col>
                            <div class="tempSaveBtn">
                                <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" style="min-height: 100px" class="repaid">
                            <p class="cardTitle">报酬情况</p>
                            <div v-if="JSON.stringify(form.rewards) !== '[]'" class="close_detail" @click="closeDetail('isShowRewardsDetail')">{{isShowRewardsDetail ? '收起' : '展开'}}
                                <i :class="`${isShowRewardsDetail ? 'arrow_open' : 'arrow_close'}`"></i>
                            </div>
                            <div style="clear: both"></div>
                            <br>
                            <el-collapse-transition>
                                <div v-if="isShowRewardsDetail">
                                    <div class="cardContent" >
                                        <el-form v-for="(item, index) in form.rewards" label-position="top"  label-width="110px" :model="item" :ref="`rewardsForm${index}`" inline :key="index" :disabled="isDisbaled">
                                            <el-form-item label="年份" >
                                                <el-date-picker
                                                    v-model="item.achieveTime"
                                                    type="year"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="选择日期">
                                                </el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="基本报酬(元/年)">
                                                <el-input type="text" v-model="item.basicReward"  @input="getSum(item)"></el-input>
                                            </el-form-item>
                                            <el-form-item label="考核报酬(元/年)">
                                                <el-input type="text" v-model="item.reviewReward"  @input="getSum(item)"></el-input>
                                            </el-form-item>
                                            <el-form-item label="增收奖励(元/年)">
                                                <el-input type="text" v-model="item.otherReward"  @input="getSum(item)"></el-input>
                                            </el-form-item>
                                            <el-form-item label="其他(元/年)">
                                                <el-input type="text" v-model="item.des"  @input="getSum(item)"></el-input>
                                            </el-form-item>
                                            <el-form-item label="总报酬(元/年)">
                                                <el-input type="text" v-model="item.totalReward" disabled readonly></el-input>
                                            </el-form-item>
                                            <el-form-item label="佐证材料">
                                                <CommonFileUpload :isText=false class="fileButton" :value="item.supportDoc" @getValue="item.supportDoc = $event"></CommonFileUpload>
                                            </el-form-item>
                                            <el-form-item label="总报酬(元/年)" style="visibility: hidden">
                                                <el-input type="text" v-model="item.totalReward" disabled readonly></el-input>
                                            </el-form-item>
                                            <el-divider v-if="isShowDeleteIcon" style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('rewards',index)"></icon></el-divider>
                                            <div v-else class="segment_line"></div>
                                        </el-form>
                                        <div class="add-btn" v-if="isShowDeleteIcon" @click="pushItem('rewards')">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                    </div>
                                    <div class="tempSaveBtn">
                                        <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                                    </div>
                                </div>
                            </el-collapse-transition>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row  :gutter="20" style="margin-top: 40px">
                    <el-col :span="8">
                        <el-card shadow="hover" style="min-height: 100px"  class="family">
                            <p class="cardTitle">家庭主要成员及社会关系</p>
                            <div v-if="JSON.stringify(form.familyInfoVOS) !== '[]'" class="close_detail" @click="closeDetail('isShowFamilyInfoVOSDetail')">{{isShowFamilyInfoVOSDetail ? '收起' : '展开'}}
                                <i :class="`${isShowFamilyInfoVOSDetail ? 'arrow_open' : 'arrow_close'}`"></i>
                            </div>
                            <div style="clear: both"></div>
                            <br>
                            <el-collapse-transition>
                                <div v-if="isShowFamilyInfoVOSDetail">
                                    <div class="cardContent">
                                        <el-form v-for="(item, index) in form.familyInfoVOS" label-position="top" :model="item" :ref="`familyForm${index}`" inline :disabled="isDisbaled">
                                            <el-form-item label="姓名">
                                                <el-input type="text" v-model="item.name"></el-input>
                                            </el-form-item>
                                            <el-form-item label="出生日期">
                                                <el-date-picker
                                                    v-model="item.birthDay"
                                                    type="date"
                                                    placeholder="请选择出生日期"
                                                    value-format="yyyy-MM-dd">
                                                </el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="称谓">
                                                <el-input type="text" v-model="item.appellation"></el-input>
                                            </el-form-item>
                                            <el-form-item label="政治面貌">
                                                <el-select v-model="item.politicalStatus">
                                                    <el-option v-for="item in Political" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="工作单位及职务">
                                                <el-input type="text" v-model="item.orgAndJob"></el-input>
                                            </el-form-item>
                                            <el-form-item label="站位" style="visibility: hidden">
                                                <el-input type="text" v-model="item.orgAndJob"></el-input>
                                            </el-form-item>
                                            <el-divider v-if="isShowDeleteIcon" style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('familyInfoVOS',index)"></icon></el-divider>
                                            <div v-else class="segment_line"></div>
                                        </el-form>
                                        <div v-if="isShowDeleteIcon" class="add-btn" @click="pushItem('familyInfoVOS')">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                    </div>
                                    <div class="tempSaveBtn">
                                        <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                                    </div>
                                </div>
                            </el-collapse-transition>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" style="min-height: 100px" class="inCountry">
                            <p class="cardTitle">在村工作具有近亲属关系人员</p>
                            <div v-if="JSON.stringify(form.familyWorkInfoVOS) !== '[]'" class="close_detail" @click="closeDetail('isShowFamilyWorkInfoVOSDetail')">{{isShowFamilyWorkInfoVOSDetail ? '收起' : '展开'}}
                                <i :class="`${isShowFamilyWorkInfoVOSDetail ? 'arrow_open' : 'arrow_close'}`"></i>
                            </div>
                            <div style="clear: both"></div>
                            <br>
                            <el-collapse-transition>
                                <div v-if="isShowFamilyWorkInfoVOSDetail">
                                    <div class="cardContent">
                                        <el-form v-for="(item, index) in form.familyWorkInfoVOS" label-position="top" :model="item" :ref="`familyWorkForm${index}`" inline :disabled="isDisbaled">
                                            <el-form-item label="姓名">
                                                <el-input type="text" v-model="item.name"></el-input>
                                            </el-form-item>
                                            <el-form-item label="称谓">
                                                <el-input type="text" v-model="item.appellation"></el-input>
                                            </el-form-item>
                                            <el-form-item label="政治面貌">
                                                <el-select v-model="item.politicalStatus">
                                                    <el-option v-for="item in Political" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="职务">
                                                <el-input type="text" v-model="item.job"></el-input>
                                            </el-form-item>
                                            <el-form-item label="在村工作时长">
                                                <el-input type="text" v-model="item.duration"></el-input>
                                            </el-form-item>
                                            <el-form-item label="站位" style="visibility: hidden">
                                                <el-input type="text" v-model="item.duration"></el-input>
                                            </el-form-item>
                                            <el-divider v-if="isShowDeleteIcon" style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('familyWorkInfoVOS',index)"></icon></el-divider>
                                        </el-form>
                                        <div v-if="isShowDeleteIcon" class="add-btn" @click="pushItem('familyWorkInfoVOS')">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                    </div>
                                    <div class="tempSaveBtn">
                                        <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                                    </div>
                                </div>
                            </el-collapse-transition>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" style="min-height: 100px"  class="honer" >
                            <p class="cardTitle">奖惩情况</p>
                            <div v-if="JSON.stringify(form.honours) !== '[]'" class="close_detail" @click="closeDetail('isShowHonoursDetail')">{{isShowHonoursDetail ? '收起' : '展开'}}
                                <i :class="`${isShowHonoursDetail ? 'arrow_open' : 'arrow_close'}`"></i>
                            </div>
                            <div style="clear: both"></div>
                            <br>
                            <el-collapse-transition>
                                <div v-if="isShowHonoursDetail">
                                    <div class="cardContent">
                                        <el-form v-for="(item, index) in form.honours" label-position="top"  :model="item" :ref="`honourForm${index}`" inline :disabled="isDisbaled">
                                            <el-form-item label="奖或惩">
                                                <el-select type="text" v-model="item.rewardsType">
                                                    <el-option v-for="item in rewardsTypeOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="时间">
                                                <el-date-picker
                                                    v-model="item.achieveTime"
                                                    type="year"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="选择日期">
                                                </el-date-picker>
                                            </el-form-item>
                                            <el-form-item  v-show="item.rewardsType == '表彰'" label="特殊表彰">
                                                <el-select type="text" v-model="item.honourType">
                                                    <el-option v-for="subItem in honourType" :value="subItem.value" :label="subItem.label" :key="subItem.value" ></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item  v-show="item.rewardsType == '表彰'" label="表彰级别">
                                                <el-select type="text" v-model="item.honourDescription">
                                                    <el-option v-for="subItem in honourDescriptionOptions" :value="subItem.value" :label="subItem.label" :key="subItem.value" ></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="奖惩内容">
                                                <el-input type="textarea" v-model="item.content" :rows="3"></el-input>
                                            </el-form-item>
                                            <el-form-item label="佐证材料" class="upFileStyle">
                                                <CommonFileUpload :isText=false  class="fileButton"  :value="item.supportDoc" @getValue="item.supportDoc = $event"></CommonFileUpload>
                                            </el-form-item>
                                            <el-divider v-if="isShowDeleteIcon" style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('honours',index)"></icon></el-divider>
                                            <div v-else class="segment_line"></div>
                                        </el-form>
                                        <div v-if="isShowDeleteIcon" class="add-btn" @click="pushItem('honours')">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                    </div>
                                    <div class="tempSaveBtn">
                                        <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                                    </div>
                                </div>
                            </el-collapse-transition>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 40px">
                    <el-col :span="8">
                        <el-card shadow="hover" style="min-height: 100px" class="train" >
                            <p class="cardTitle">培训情况</p>
                            <div v-if="JSON.stringify(form.trainingInfoVOS) !== '[]'" class="close_detail" @click="closeDetail('isShowTrainingInfoVOSDetail')">{{isShowTrainingInfoVOSDetail ? '收起' : '展开'}}
                                <i :class="`${isShowTrainingInfoVOSDetail ? 'arrow_open' : 'arrow_close'}`"></i>
                            </div>
                            <div style="clear: both"></div>
                            <br>
                            <el-collapse-transition>
                                <div v-if="isShowTrainingInfoVOSDetail">
                                    <div class="cardContent">
                                        <el-form v-for="(item, index) in form.trainingInfoVOS" label-position="top" :model="item" :ref="`trainingForm${index}`" inline :disabled="isDisbaled">
                                            <el-form-item label="培训名称">
                                                <el-input type="text" v-model="item.trainingName"></el-input>
                                            </el-form-item>
                                            <el-form-item label="培训类型">
                                                <el-select  v-model="item.trainingType">
                                                    <el-option v-for="subItem in trainingTrueType" :value="subItem.value" :label="subItem.label" :key="subItem.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="培训等级">
                                                <el-select  v-model="item.trainingGrade">
                                                    <el-option v-for="subItem in trainingType" :value="subItem.value" :label="subItem.label" :key="subItem.value"></el-option>
                                                </el-select>
                                            </el-form-item>
                                            <el-form-item label="培训时间">
                                                <el-date-picker
                                                    v-model="item.trainingDuration"
                                                    type="month"
                                                    placeholder="请选择培训时间"
                                                    value-format="yyyy-MM-dd">
                                                </el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="培训天数">
                                                <el-input
                                                    v-model="item.trainingDays"
                                                    type="number"
                                                    placeholder="请输入培训天数">
                                                </el-input>
                                            </el-form-item>
                                            <el-form-item label="佐证材料">
                                                <CommonFileUpload :isText=false class="fileButton"  :value="item.supportDoc" @getValue="item.supportDoc = $event"></CommonFileUpload>
                                            </el-form-item>
                                            <el-form-item label="培训内容">
                                                <el-input type="textarea" v-model="item.content" :rows="3"></el-input>
                                            </el-form-item>
                                            <el-form-item label="培训成果">
                                                <el-input type="textarea" v-model="item.trainingResults" :rows="3"></el-input>
                                            </el-form-item>
                                            <el-divider v-if="isShowDeleteIcon" style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('trainingInfoVOS',index)"></icon></el-divider>
                                            <div v-else class="segment_line"></div>
                                        </el-form>
                                        <div v-if="isShowDeleteIcon" class="add-btn" @click="pushItem('trainingInfoVOS')">
                                            <i class="el-icon-plus"></i>
                                        </div>
                                    </div>
                                    <div class="tempSaveBtn" >
                                        <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                                    </div>
                                </div>
                            </el-collapse-transition>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row  :gutter="20" style="margin-top: 40px">
                    <el-col :span="24">
                        <el-card shadow="hover" style="height: 320px" class="assessment" >
                            <p class="cardTitle">考核情况</p>
                            <div style="clear: both"></div>
                            <br>
                            <el-col :span="22" :offset="2">
                                <div  class="show-self" style="font-size: 15px">
                                    <div v-for="item in form.pxList">
                                        <div style="margin-bottom: 10px;text-align: left">
                                            <label>考核年度：2019年</label>
                                        </div>
                                        <div style="margin-bottom: 10px;text-align: left">
                                            <span>考核内容：</span>
                                            <p style="display: inline">针对2019年全面村书记工作情况的考核</p>
                                        </div>
                                        <div style="margin-bottom: 10px;text-align: left">
                                            <span>考核结果：</span>
                                            <p style="display: inline-block">等次: 优秀；镇排名: 5；全市排名：23</p>
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-card>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-dialog
            v-if="qrCodeVis"
            :visible.sync="qrCodeVis"
            title="二维码信息"
            width="290px"
            :append-to-body="true">
            <div id="qrcode" style="margin: 0 auto;">
            </div>
            <div style="color: red;font-size: 16px;text-align: center">
                手机扫描二维码上传佐证材料！
                <br>
                仅限基本信息、工作信息模块！
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import LookUp from '@/lookup'
    import CommonFileUpload from '@/components/FileUpLoad';
    import QRCode  from "qrcodejs2"
    export default {
        name: "SecretaryEdit",
        props: {
            currentSecretary: {
                type: Object
            },
            isHasTask: {
                type: Boolean,
                default: false
            },
            endTime: {
                type: String,
            },
        },
        watch: {
            'currentSecretary.id': {
                handler: function () {
                    this.isShowRewardsDetail= true,
                    this.isShowFamilyInfoVOSDetail= true,
                    this.isShowFamilyWorkInfoVOSDetail= true,
                    this.isShowHonoursDetail= true,
                    this.isShowTrainingInfoVOSDetail= true
                    this.form = JSON.parse(JSON.stringify(this.currentSecretary));
                    this.submitable = false;
                    if(this.form.state === '0'){
                        this.buttonDisabled = false;
                    }else{
                        this.buttonDisabled = true;
                    }
                    this.images = [];
                    this.images.push({name: 'avator.jpg', url: this.form.headSculpture});
                }
            },
            // 'form': {
            //   handler: function (newName, oldName) {
            //     this.submitable = false;
            //     console.log(newName, '---------', oldName);
                
            //   }
            // },
            'form.state': {
              handler: function () {
                if(this.form.state !== '0') {
                  this.isDisbaled = true;
                  this.isShowDeleteIcon = false;
                } else {
                  this.isDisbaled = false;
                  this.isShowDeleteIcon = true;
                }
              }
            },
            'form.hasOnTheJob': {
              handler: function () {
                  if (this.form.hasOnTheJob === '在职') {
                    this.isShowRetirementWage = false;
                    this.form.retirementWage = ''; 
                  } else if (this.form.hasOnTheJob === '退休') {
                    this.isShowRetirementWage = true;
                  }
              }
            }
        },
        data() {
            return {
                form: {},
                activities: [],
                isDisbaled: false,
                isShowDeleteIcon: true,
                medicalInsuranceOptions:LookUp["MedicalInsurance"],
                socialSecurityDatabasesOptions:LookUp["SocialSecurityDatabases"],
                sexOptions:LookUp["Sex"],
                nationOptions:LookUp["nation"],
                eduOptions:LookUp["Education"],
                healthOptions:LookUp["health"],
                personOptions:LookUp["personTyle"],
                creditOptions:LookUp["credit"],
                rewardsTypeOptions:LookUp["rewardsTypeOptions"],
                honourDescriptionOptions:LookUp["honourDescriptionOptions"],
                honourType:LookUp["HonoursType"],
                Political : LookUp["Political"],
                trainingType : LookUp["TrainingType"],
                trainingTrueType : LookUp["trainingTrueType"],
                RankOptions: LookUp['rankOptions'],
                hasOnTheJob: LookUp['hasOnTheJob'],
                workExperiencePlaceholder: '2006.08-2010.10 任XX村支部组织委员' + '\n' +
                    '2010.11-2013.10 任XX村支部副书记' + '\n' +
                    '2013.11-2015.10 任XX村支部书记(示例)',
                honoursList: [],

                rules:{
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    identityCard: [
                        { required: true,validator: (rule, value, callback) => {
                                if (!this.form[rule.field]) {
                                    callback(new Error('请输入身份证号'));
                                } else {
                                    if (this.form[rule.field].length != 18) {
                                        callback(new Error('请输入18位的身份证号'));
                                    } else {
                                        callback();
                                        return true;
                                    }
                                }
                            }, trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别',  trigger: 'blur' }
                    ],
                    birth: [
                        { required: true, message: '请选择出生日期',  trigger: 'blur' }
                    ],
                    contact: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' }
                    ],
                    education: [
                        { required: true, message: '请选择学历',  trigger: 'blur' }
                    ],
                    health: [
                        { required: true, message: '请选择健康情况',  trigger: 'blur' }
                    ],
                    creditStatus: [
                        { required: true, message: '请选择有无失信情况',  trigger: 'blur' }
                    ],
                    personnelType: [
                        { required: true, message: '请选择人员类型',  trigger: 'blur' }
                    ],
                    onDutyTime: [
                        { required: true, message: '请输入年', trigger: 'blur' }
                    ],
                    onDutyMonth: [
                        { required: true, message: '请输入月', trigger: 'blur' }
                    ],
                    socialSecurityDatabases: [
                          { required: true, message: '请选择养老保险类型',  trigger: 'blur' }
                    ],
                    paymentPeriod: [
                          { required: true, message: '请输入缴费年限',  trigger: 'blur' }
                    ],
                    depositBalance: [
                          { required: true, message: '请输入上年账户累计储存额',  trigger: 'blur' }
                    ],
                    hasOnTheJob: [
                          { required: true, message: '请选择在职/退休',  trigger: 'blur' }
                    ],
                    retirementWage: [
                          { required: true, message: '请输入退休工资',  trigger: 'blur' }
                    ],
                    medicalInsurance: [
                          { required: true, message: '请选择医疗保险类型',  trigger: 'blur' }
                    ],
                    // insuredTime: [
                    //       { required: true, message: '请选择参保时间',  trigger: 'blur' }
                    // ],
                    // insurancePaymentPeriod: [
                    //       { required: true, message: '请填写缴费年限',  trigger: 'blur' }
                    // ],
                    // primaryAccountBalance: [
                    //       { required: true, message: '请填写当前一级账户余额/退休',  trigger: 'blur' }
                    // ],
                    // secondaryAccountBalance: [
                    //       { required: true, message: '请填写当前二级账户余额',  trigger: 'blur' }
                    // ],
                    // insuranceAccountBalance: [
                    //       { required: true, message: '请填写当前医保账户余额',  trigger: 'blur' }
                    // ]
                },
                editLoad:false,
                images: [],
                timer: '',
                qrCodeVis: false,
                submitable: false,
                buttonDisabled:true,
                isShowRewardsDetail: true,
                isShowFamilyInfoVOSDetail: true,
                isShowFamilyWorkInfoVOSDetail: true,
                isShowHonoursDetail: true,
                isShowTrainingInfoVOSDetail: true,
                isShowRetirementWage: false
            }
        },
        components: {
            CommonFileUpload,
        },
        methods: {
            loadUpdateInfoList() {
                this.$http('POST', `identity/informationAudit/list?sort=createdAt,desc`,
                    {villageId: this.form.id, processType: '基本信息更新'}, false).then(data => {
                    this.activities = [];
                    for (let i = 0; i < data.length; i++) {
                        let obj = {};
                        obj.modifiedAt = new Date(data[i].modifiedAt).Format("yyyy-MM-dd HH:mm");
                        obj.auditor = data[i].auditor;
                        obj.auditAdvice = data[i].auditAdvice;
                        obj.status = data[i].status;
                        this.activities.push(obj);
                    }
                });
            },
            uploadFile(http) {
                let file = http.file;
                let formData = new FormData();
                formData.append('file', file);
                this.$http('POST', '/zuul/identity/accessory/', formData, false).then(
                    res => {
                        this.images = [];
                        this.images.push({name: file.name, url: res.path});
                        this.form.headSculpture = res.path;
                    }
                )
            },
            getSum(item) {
                item.totalReward = (parseFloat(item.basicReward) * 100  + parseFloat(item.reviewReward) * 100 + parseFloat(item.otherReward) * 100 + parseFloat(item.des) * 100) / 100;
            },
            pushItem(field) {
                if (field === 'rewards') {
                    this.form[field].push({
                        cadresId: this.form.id,
                        basicReward: 0,
                        reviewReward: 0,
                        otherReward: 0,
                        totalReward: 0,
                        des: 0
                    })
                } else {
                    this.form[field].push({cadresId: this.form.id})
                }
            },
            delItem(field, index) {
                this.form[field].splice(index, 1);
            },
            getBaseInfo(id) {
                return this.$http('GET', `identity/villageCadres/${id}id`, false).then(data => {
                    this.form = data;
                    this.images = [];
                    this.images.push({name: 'avator.jpg', url: data.headSculpture});
                    return data;
                })
            },
            saveBaseInfo(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.form.cadresType='SECRETARY';
                        this.editLoad = true;
                        let formDTO =  Object.assign({}, this.form);
                        formDTO.trainingInfoDTOS = formDTO.trainingInfoVOS;
                        formDTO.familyInfoDTOS = formDTO.familyInfoVOS;
                        formDTO.familyWorkInfoDTOS = formDTO.familyWorkInfoVOS;
                        delete formDTO.trainingInfoVOS;
                        delete formDTO.familyInfoVOS;
                        delete formDTO.familyWorkInfoVOS;
                        this.$http('PUT', `identity/villageCadres/${formDTO.id}id`,formDTO, false).then(content => {
                            this.getBaseInfo(formDTO.id).then(
                                res => {
                                    this.editLoad = false;
                                    this.submitable = true;
                                    this.$emit("handleFinish", res);
                                    this.$message({
                                        type: 'success',
                                        message: '当前信息保存成功！'
                                    });
                                }
                            )
                        })
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '存在未填写的信息，请补全信息！'
                        });
                    }
                })
            },
            saveTempInfo(){
                this.form.cadresType='SECRETARY';
                this.editLoad = true;
                let formDTO =  Object.assign({}, this.form);
                formDTO.trainingInfoDTOS = formDTO.trainingInfoVOS;
                formDTO.familyInfoDTOS = formDTO.familyInfoVOS;
                formDTO.familyWorkInfoDTOS = formDTO.familyWorkInfoVOS;
                delete formDTO.trainingInfoVOS;
                delete formDTO.familyInfoVOS;
                delete formDTO.familyWorkInfoVOS;
                this.$http('PUT', `identity/villageCadres/${formDTO.id}id`,formDTO, false).then(content => {
                    this.getBaseInfo(formDTO.id).then(
                        res => {
                            this.editLoad = false;
                            this.$emit("handleFinish", res);
                            this.$message({
                                type: 'success',
                                message: '当前信息保存成功！'
                            });
                        }
                    )
                })
            },
            submit() {
                this.editLoad = true;
                this.$http('PUT', `identity/villageCadres/submit/${this.form.id}`, false).then(content => {
                    this.getBaseInfo(this.form.id).then(
                        res => {
                            this.editLoad = false;
                            this.submitable = false;
                            this.buttonDisabled = true;
                            this.$emit("handleFinish", res);
                            this.$message({
                                type: 'success',
                                message: '当前信息提交成功！'
                            });
                        }
                    )
                });
            },
            loadAnnex() {
                this.$http('POST', '/identity/villageCadresAnnex/list', {cadresId: this.form.id}, false).then(data => {
                    data.forEach(item => {
                        this.form[item.type] = item.filePath;
                    })
                })
            },
            showQrCode() {
                this.qrCodeVis = true;
                this.$nextTick(() => {
                    let token = sessionStorage.getItem("token");
                    document.getElementById('qrcode').innerHTML = '';
                    let qrcode = new QRCode('qrcode', {
                        width: 250,
                        height: 250,
                        text: `http://${location.host}/#/mobileUploadFile?cadreId=${this.form.id}&token=${token}`
                    })
                })
            },
            handleImage(imageUrl){
                let arr = [];
                if(imageUrl){
                    if(imageUrl.indexOf(',')>-1){
                        imageUrl.split(',').forEach(item => {
                            arr.push(item.split('&')[0]);
                        })
                    }else{
                        arr.push(imageUrl.split('&')[0]);
                    }
                }
                return arr;
            },
            closeDetail (value) {
                this[value] = !this[value];
            }
        },
        mounted() {
            this.form = JSON.parse(JSON.stringify(this.currentSecretary));
            this.images = [];
            this.images.push({name: 'avator.jpg', url: this.form.headSculpture});
            this.timer = setInterval(() => {
                this.loadAnnex();
            }, 10000)
        },
        beforeDestroy() {
            window.clearInterval(this.timer);
        }
    }
</script>

<style scoped>
    .secretary-edit {
        background: #FFFFFF;
        box-shadow:0px 3px 14px 0px rgba(69,161,79,0.3);
        padding: 0px 15px 20px;
        border: 1px rgba(69, 161, 79, 0.3) solid;
        border-top: #55BD94 1px solid;
        border-radius: 3px;
        border-bottom: none;
        margin-top: 20px;
    }
    .secretary-edit .activeLine{
        width: 100%;
        height: 1px;
        background-color: transparent;
        position: relative;
        box-shadow:0px 3px 14px 0px rgba(69,161,79,0.3);
    }
    .secretary-edit .activeLineArrow{
        margin: 0px auto 0 auto;
        width: 20px;
        height:20px;
        background: white;
        border-top:1px solid #55BD94;
        border-left:1px solid #55BD94;
        transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        position: relative;
        left: -9px;
        top: -10px;
    }
    .secretary-edit .taskNotice{
        width: 24px;
        height: 24px;
        display: inline-block;
        background: url("../../static/img/csj/notice.png");
        vertical-align: middle;
    }
    .baseMassage {
        background-image: url("../../static/messageBg/cardBg.png");
        background-size: 100% 100%;
    }
    .workMessage {
        background-image: url("../../static/messageBg/workMessageBg.png");
        background-size: 100% 100%;
    }
   .endowment_insurance {
        background-image: url("../../static/messageBg/workExperienceBg.png");
        background-size: 100% 100%;
    }
    .workExperience {
        background-image: url("../../static/messageBg/workExperienceBg.png");
        background-size: 100% 100%;
    }
    .repaid {
        background-image: url("../../static/messageBg/repaidBg.png");
        background-size: 100% 100%;
    }
    .family {
        background-image: url("../../static/messageBg/familyBg.png");
        background-size: 100% 100%;
    }
    .inCountry {
        background-image: url("../../static/messageBg/inCountryBg.png");
        background-size: 100% 100%;
    }
    .train {
        background-image: url("../../static/messageBg/trainBg.png");
        background-size: 100% 100%;
    }
    .honer {
        background-image: url("../../static/messageBg/honerBg.png");
        background-size: 100% 100%;
    }
    .assessment {
        background-image: url("../../static/messageBg/assessmentBg.png");
        background-size: 100% 100%;
    }
    .secretary-edit .cardTitle{
        float: left;
        padding: 20px 20px 0 20px;
        text-align: left;
    }
    .close_detail {
        float: right;
        padding: 20px 20px 0 20px;
        font-size: 16px;
        font-weight: normal;
        color: #55bd94;
        cursor: pointer;
    }
    .close_detail i {
        float: right;
        margin-top: 7px;
        margin-left: 8px;
        width: 8px;
        height: 8px;
        border-top: 1px solid #55bd94;
        border-right: 1px solid #55bd94;
    }
    .close_detail .arrow_open {
        transform: rotate(135deg);
        transition: .5s;
    }
    .close_detail .arrow_close {
        transform: rotate(45deg);
        transition: .5s;
    }
    .secretary-edit .cardContent{
        min-height: 205px;
        padding: 0px 20px;
    }
    .secretary-edit .tempSaveBtn{
        text-align: right;
        margin: 10px 16px 10px 0;
    }
    .secretary-edit .fileButton{
        width: 160px;
        text-align: left;
        display: inline-block
    }
    .segment_line {
      margin: 25px 0;
      border-top: 1px solid #dfdfdf;
    }
    .socialSecurityForm .card_line {
      margin: 8px 0;
      /* border-top: 1px dashed #ccc; */
    }
    
</style>
<style>
    .secretary-edit .el-card__body{
        padding: 20px 10px!important;
    }
    .secretary-edit el-col{
        padding: 0 10px 10px 10px!important;
    }
    .edit-form  .el-input {
        display: inline-block;
    }
    .edit-form .el-input__prefix .el-button {
        position: relative;
        top: -2px;
        left: -24px;
    }
    .edit-form .el-input .el-input--prefix .el-input__inner {
        padding-left: 0;
    }
    .edit-form .el-date-editor.el-input--prefix .el-input__inner {
        padding-left: 30px !important;
    }
    .edit-form .el-form-item__error {
        margin-left: 15px;
    }
    #qrcode img {
        display: inline-block !important;
    }
    .header-content .el-card__body{
        padding: 0 !important;
    }
    .header-content .el-upload--picture-card {
        width: 160px!important;
        height: 227px!important;
        margin: 15px auto 10px auto;
        left: 55px;
        position: absolute;
    }
    .header-content .el-upload-list--picture-card .el-upload-list__item {
        width: 160px!important;
        height: 227px!important;
        margin: 15px auto 10px auto;
        position: absolute;
        top: 16px;
        left: 55px;
        z-index: 99;
    }
    .name-input {
        display: inline-block!important;
        width: 50px!important;
        position: relative!important;
        height: 30px!important;
        margin-top: -8px!important;
    }
    .name-input .el-input__inner {
        width: 50px;
        /* margin-bottom: 10px; */
        padding: 0;
        font-size: 16px;
        border: none;
        background: transparent;
        color: goldenrod;
        text-align: left;
        height: 20px;
        line-height: 20px;
    }
    .add-btn {
        width: 100%;
        height: 45px;
        border-radius: 20px;
        border: 1px #d9d9d9 dashed;
        cursor: pointer;
        clear: both;
        text-align: center;
    }
    .add-btn i {
        font-size: 28px!important;
        line-height: 44px;
        color: #d9d9d9;
    }
    .add-btn:hover {
        background: #f8f8f8;
    }
    .secretary-edit svg{
        margin: 0 5px!important;
    }
    .secretary-edit .el-form--label-top .el-form-item__label {
        float: left!important;
        text-align: left!important;
        padding: 0!important;
    }
    .secretary-edit .familyWorkStyle{
        width: 30%;
        float: left;
        margin: 5px 20px;
    }
    .el-divider__text.is-center svg {
        cursor: pointer;
    }
    .qrcode-content {
        color: #2B2B2B;
        float: right;
        transition: all .3s;
        position: relative;
        top: -30px;
    }
    .qrcode-content:hover {
        color: #409eff;
        transform:scale(1.1);
        cursor: pointer;
    }
    .secretary-edit .el-input--prefix .el-input__inner{
        padding-left: 15px!important;
    }
    .secretary-edit .el-input--suffix .el-input__inner{
        padding-right: 0px!important;
    }
    .secretary-edit .el-input {
        width: 160px;
    }
    .secretary-edit .el-form-item__label{
         padding: 0 20px 0 0!important;
      }
   /*  .secretary-edit .el-form-item__label{
       width: 97px!important;
   }*/

    .secretary-edit .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 10px!important;
    }
    .secretary-edit .el-input--mini .el-input__inner {
        width: 160px !important;
    }
    .secretary-edit .el-select {
        width: 160px !important;
    }
    .secretary-edit .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 160px !important;
    }
    .secretary-edit .cardContent .el-textarea__inner{
        width: 160px!important;
    }
    .secretary-edit .cardContent .el-form-item{
        margin: 0 18px;
    }
    /* .work_time */
    .secretary-edit .el-input--mini.work_time .el-input__inner {
      width: 50px!important;
    }
    .secretary-edit .el-form-item.work_time {
      display: inline-block;
    }
    .secretary-edit .el-form-item.work_time .el-form-item__content {
      display: inline-block;
      width: 83px;
    }
    .secretary-edit .el-form-item.work_time .el-form-item__content .el-input--mini,
    .secretary-edit .el-form-item.work_time .el-form-item__content .el-input__inner {
      width: 50px!important;
    }
    .secretary-edit .el-form-item.work_time .el-form-item__content {
      margin-left: 5px!important;
    }
    /* .secretary-edit .socialSecurityForm .el-input--mini .el-input__inner {
      width: 200px!important;
    } */
    .secretary-edit .socialSecurityForm .el-form-item.el-form-item--mini:nth-child(even) {
      margin-left: 50px;
    }
</style>
